<template>
  <view class="welcome-page" v-if="imgSrc">
    <image :src="imgSrc" mode="aspectFill"></image>
    <view class="bottom-box">
      <view @click="gotoIndex">跳过 | {{time}}秒</view>
    </view>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      imgSrc: '',
      time: 5,
      timer: null
    }
  },

  onLoad() {
	
	this.getImgSrc()
    
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },

  methods: {
    /**
     * 模拟接口请求
     */
    mockApi() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
			code: 200,
			data:app.globalData.config.app_advert,
			time:app.globalData.config.app_advert_sec||0
          })
        }, 1000)
      })
    },

    /**
     * 获取图片地址
     */
    async getImgSrc() {
      try {
        const res = await this.mockApi()
		
        this.imgSrc = res.data
		if(!this.imgSrc){
			this.gotoIndex()
		}
		this.time = parseInt(res.time)
		this.countDown()
      } catch (e) {
        console.log(e);
      }
    },

    /**
     * 跳转到首页
     */
    gotoIndex() {
      uni.reLaunch({
        url: '/pages/home/index/index'
      });
    },

    /**
     * 倒计时
     */
    countDown() {
      this.timer = setInterval(() => {
        this.time--;
        if (this.time < 1) {
          clearInterval(this.timer)
          this.time = 0
          this.gotoIndex()
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.welcome-page {
  position: relative;
  width: 100vw;
  height: 100vh;

  image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bottom-box {
    position: absolute;
    right: 50rpx;
    top: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;

    view {
      width: 180rpx;
      height: 64rpx;
      background-color: rgba(0, 0, 0, .3);
      border-radius: 999rpx;
      text-align: center;
      line-height: 64rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
}
</style>